<template>
	<view class="page">
		<view class="Banner-box">
			<view class="Banner-item" :class="Banner==1?'Banner-active':''" @click="Baner_check(1)">
				推广二维码
			</view>
			<view class="Banner-item" :class="Banner==2?'Banner-active':''" @click="Baner_check(2)">
				下载二维码
			</view>
		</view>
		<view class="code">
			<view class="code-box">
				<view class="code-title" v-if="Banner==1">
					我的ID:<text class="code-title-text">{{invite_code}}</text>
				</view>
				<view class="code-title" v-if="Banner==2">
					下载二维码
				</view>
				<view class="code-img-box" @longtap='save_img()'>
					<image v-if="Banner==1" :src="$util.img(code_img1)" mode="aspectFit"></image>
					<image v-if="Banner==2" :src="$util.img(code_img2)" mode="aspectFit"></image>
				</view>
				<view class="code-foot" v-if="Banner==1">
					<view class="code-foot-text1">
						向用户出示该二维码即可快速注册
					</view>
					<view class="code-foot-text2">
						扫描二维码将自动识别为本用户推广会员
					</view>
				</view>
				<view class="code-foot" v-if="Banner==2">
					<view class="code-foot-text1">
						向用户出示该二维码下载APP
					</view>
					<view class="code-foot-text2">
						扫描二维码支持自动识别IOS/Android
					</view>
				</view>
			</view>
		</view>
		<view class="save">
			长按二维码保存到相册
		</view>
		<view class="footer">
			<view class="footer-item" @click="footer_check(1)">
				我的推广
			</view>
			<view class="footer-item active" @click="footer_check(2)">
				推广海报
			</view>
		</view>
		<uni-popup ref="posters" type="center" class="wap-floating">
			<view class="image-wrap">
				<image :src="$util.img(posters)" mode="aspectFill"></image>
			</view>
			<view class="btn-group">
				<view class="btn-item save-color" @click="save()">
					保存到相册
				</view>
				<view class="btn-item line-color">
					|
				</view>
				<view class="btn-item" @click="close()">
					关闭
				</view>
			</view>
			<!-- <text class="iconfont iconroundclose" @click="closeNum"></text> -->
		</uni-popup>
		<uni-popup ref="agreement" type="center" class="agreement" >
			<view class="wrap">
				<view class="agreement-title-box"> {{agreementsTitle}} </view>
				<view class="content" v-html="agreements"></view>
				<view class="agreement-buttom-box">
					<button type="default" style="border: 1rpx solid #E4E5E5;" @click="btn1">不同意</button>
					<button type="default" style="background-color: #FF4544; color: #FFFFFF;" @click="btn2">同意</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import Config from '@/common/js/config.js'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				Banner: 1,
				code_img1: '',
				code_img2: '',
				posters: '',
				user_id: '',
				invite_code: '', //邀请码
				posters_id: '',
				headimg: '',
				poster_name: '',
				agreementsTitle:'',
				agreements:'协议内容',
				agree:true
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.getMemberInfo()
			} else {
				this.$util.redirectTo('/pages/member/index/index');
			}
		},

		mounted() {
			if(!uni.getStorageSync('is_agreement')){
				uni.setStorage({
					key:'is_agreement',
					data:2
				})
			}
			if(uni.getStorageSync('is_agreement') == 2 ){
				this.$refs.agreement.open()
			}
			this.agreeMent()
		},

		methods: {
			btn1(){
				this.$refs.agreement.close()
				setTimeout(() => {
					this.$util.goBack();
				}, 300)
			},
			btn2(){
				this.$refs.agreement.close()
				uni.setStorage({
				    key: 'is_agreement',
				    data: 1
				});
			},	
			agreeMent(){
				this.$api.sendRequest({
					url: '/membercard/api/card/agreement',
					success: res => {
						console.log(res);
						if(res.code == 0){
							this.agreementsTitle=res.data.value.title
							this.agreements = res.data.value.content
						}
					}
				});
			},

			Baner_check(e) {
				this.Banner = e
			},
			Getimg(e) {
				let _data = {
					path: '',
					type: ''
				}
				if (e == 1) {
					// 注册
					_data.path = Config.h5Domain + '/pages/login/register/phone_reg?invite_code=' + this.posters_id
					_data.type = 'member'
				} else {
					// 下载
					_data.path = Config.h5Domain + '/otherpages/download/download'
					_data.type = 'website'
				}
				this.$api.sendRequest({
					url: '/api/member/getqrcode',
					data: _data,
					success: res => {
						if (res.code == 0) {
							if (e == 1) {
								this.code_img1 = res.data.path + '?time=' + (new Date().getTime());
							} else {
								this.code_img2 = res.data.path + '?time=' + (new Date().getTime());
							}
						}
					}
				});
			},
			Getposters() {
				this.$api.sendRequest({
					url: '/api/member/getposter',
					data: {
						path: 'http://zhl.niuteam.cn/h5/pages/login/register/phone_reg?invite_code=' + this.posters_id
					},
					success: res => {
						if (res.code == 0) {
							this.posters = res.data.poster_path + '?time=' + (new Date().getTime());
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.code == 0) {
							console.log(res)
							this.user_id = res.data.member_id
							this.invite_code = res.data.invite_code;
							this.posters_id = res.data.invite_code
							this.headimg = res.data.headimg
							this.poster_name = res.data.username
							this.Getposters()
							this.Getimg(1)
							setTimeout(() => {
								this.Getimg(2)
							}, 200)
						}
					}
				});
			},
			save_img(e = 1) {
				console.log('save')
				let _url = ''
				if (this.Banner == 1 && e == 1) {
					_url = this.$util.img(this.code_img1)
				} else if (this.Banner == 2 && e == 1) {
					_url = this.$util.img(this.code_img2)
				} else if (e == 2) {
					_url = this.$util.img(this.posters)
				}
				uni.showActionSheet({
					itemList: ['保存图片'],
					success: (res) => {
						if (res.tapIndex == 0) {
							uni.downloadFile({
								url: _url,
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: "保存成功",
													icon: "success"
												});
											},
											fail: function() {
												uni.showToast({
													title: "保存失败，请稍后重试",
													icon: "none"
												});
											}
										});
									}
								}
							})
						}
					},
					fail: function(res) {
						console.log(res);
					}
				});
			},
			save() {
				uni.downloadFile({
					url: this.$util.img(this.posters),
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "success"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			footer_check(event) {
				if (event == 1) {
					// 跳转
					this.$util.redirectTo('/otherpages/member/my_team/my_team');
				} else {
					this.$refs.posters.open()
				}
			},
			close() {
				this.$refs.posters.close()
			},
		
			
		
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;

		.Banner-box {
			height: 100rpx;
			display: flex;

			.Banner-item {
				font-size: 30rpx;
				flex: 1;
				line-height: 100rpx;
				color: #909399;
				text-align: center;
				border-bottom: 2rpx solid #F8F8F8;
			}

			.Banner-active {
				color: #FF315B;
				border-bottom: 2rpx solid #FF315B;
			}
		}

		.code {
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 30rpx;
			margin-top: 50rpx;

			.code-box {
				width: 100%;
				background-color: white;
				padding: 20rpx;
				box-sizing: border-box;

				.code-title {
					text-align: center;
					margin-bottom: 10rpx;
					font-size: 30rpx;

					.code-title-text {
						background-color: #017FFF;
						border-radius: 12rpx;
						margin-left: 10rpx;
						padding: 10rpx;
						color: white;

					}
				}

				.code-img-box {
					width: 100%;
					display: flex;
					justify-content: center;

					image {
						width: 75%;
					}
				}

				.code-foot {
					margin-top: 10rpx;
					text-align: center;

					.code-foot-text1 {
						line-height: 1;
					}

					.code-foot-text2 {
						color: #909399;
						font-size: 28rpx;
					}
				}
			}
		}

		.save {
			margin-top: 15rpx;
			text-align: center;
			color: #909399;
			font-size: 28rpx;
		}

		.footer {
			position: fixed;
			bottom: 0;
			background-color: white;
			border-top: 2rpx solid #D4D4D4;
			width: 100%;
			display: flex;
			height: 100rpx;

			.footer-item {
				font-size: 30rpx;
				line-height: 100rpx;
				flex: 1;
				text-align: center;
				color: #909399;
			}

			.active {
				color: #FF315B;
			}
		}

		.wap-floating {
			.image-wrap {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					height: 800rpx;
					width: 100%;
				}
			}

			.btn-group {
				display: flex;
				height: 100rpx;

				.btn-item {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					width: 50%;
				}

				.line-color {
					line-height: 95rpx;
					width: 10rpx;
					color: #909399;
				}

				.save-color {
					color: #00D16A;
				}
			}
		}

		.agreement {
			display: flex;
			    
			justify-content: center;
			align-items: center;
			.wrap{width: 100%; display: flex;flex-direction: column;position: relative;box-sizing: border-box;padding:60rpx 0rpx 0rpx;overflow-y: hidden;
				.agreement-title-box{position: absolute;top: 0rpx;height: 60rpx;line-height: 60rpx;font-size: 32rpx;width: 100%; text-align: center;}
				.content{flex: 1;width: 100%;overflow-y: auto;margin-bottom: 20rpx;}
				.agreement-buttom-box{height: 80rpx;line-height: 80rpx;}
			}

			/deep/ .uni-popup__wrapper {
				width: 100%;
			}
			

			/deep/.uni-popup__wrapper-box {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				align-items: center;
				min-height: 800rpx;
				max-height: 800rpx;
				padding: 20rpx 20rpx;
			}

			.agreement-buttom-box {
				display: flex;
				button{
					width: 220rpx;
				}
			}
			.agreement-title-box{
				font-size: 35rpx;
				font-weight: 400;
			}

		}

	}
</style>
<style scoped>
	/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		border-radius: 6px;
		width: 85%;
		/* height: 70%; */
	}
</style>
